<!-- CourseCenter_CourseSearch.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>搜索课程列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.mui-table-view{
				margin-left: 0;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				padding: 10px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course-img{
				display:block;
				width: 136px;
				max-width: 136px;
				height: 84px;
				background-image: url(../../image/course_placehoder.png);
				background-size: 136px 84px;
			}
			.mui-table-view-cell .top-content{
				height: 40px;
			}
			.mui-table-view-cell .bottom-content{
				/*padding-top: 16px;*/
				height: 44px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course_title{
				overflow: hidden;
			 	text-overflow: ellipsis;
			 	white-space: pre-wrap;
			 	display: -webkit-box;
			 	-webkit-line-clamp: 2;
			 	-webkit-box-orient: vertical;
			 	font-size: 14px;
			 	color: #222;
			 	line-height: 20px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .subtitle{
				color: #999;
				font-size: 12px;
				overflow: hidden;
				white-space: normal;
			 	text-overflow: ellipsis;
			 	line-height: 14px;
			}
			/*.subtitle .right-span{
				margin-left: 10px;
			}*/
			.subtitle-red{
				color: #e10d20;
				font-size: 12px;
				margin: 0;
			}
			.cell-btn{
				font-size: 12px;
			    font-weight: 400;
			    line-height: 1.2;
			    padding: 4px 6px;
			    border-color: #1da4e8;
			    background-color: #1da4e8;
			    color: white;
			    width: 70px;
			}	
			.cell-btn:enabled:active{
				background-color: #2db4f8;
			}
			.bottom-content .cell-content-left{
				padding-right: 68px;
				float: left;
			}
			.bottom-content .cell-content-right{
				padding-top: 10px;
				width: 68px;
				height: 42px;
				float: right;
				position: absolute;
				right: 10px; 
				top: 50px;
			}
			.button-super-div{
				padding: 2px 0;
			}
			.course-status-tag{
				position: absolute;
				bottom: 10px;
				left: 10px;
				font-size: 12px;
				color: white;
				padding: 2px 4px;
				line-height: 1em;
				width: 136px;
				background-color: rgba(0,0,0,0.5);
				text-align: center;
			}
			.course-status-tag-red{
				background-color: #EC1A2B;
			}
			.course-status-tag-green{
				background-color: #1DBF53;
			}
			.tag-img{
				width: 12px;
				height: 12px;
				margin-right: 4px;
			}
			.cell-btn{
				margin-right: 10px;
			}
			.info-span{
				margin-left: 10px;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				margin-right: 12px;
			}
			.top-p{
				margin-top: 10px;
			}
			.bottom-p{
				margin-top: 6px;
			}
			.mui-table-view-cell{
				padding: 10px;
			}
			.mui-table-view-cell.mui-checkbox.mui-left, .mui-table-view-cell.mui-radio.mui-left{
				padding-left: 50px;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
			    position: absolute;
			    top: 28px;
			    left: -10px;
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
				color: #18b4ed;
			}
			.add-btn{
				color: white;
				background-color: #18b4ed;
				border-color: #18b4ed;
				margin-top: 10px;
			}
			.add-btn:enabled:active{
				background-color: #08a4dd;
				border-color: #08a4dd;
			}
			.base_icon{
				width: 20px;
				margin-top: 12px;
			}
			.bottom-div{
				height: 40px;
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.bottom-checkbox input[type=checkbox]:before{
			    position: absolute;
			    top: 0;
			    left: -10px;
			}
			.bottom-left-div{
				margin-right: 100px;
				line-height: 24px;
				font-size: 14px;
				color: #222;
			}
			.bottom-right-div{
				width: 100px;
				float: right;
				font-size: 16px;
				background-color: #18b4ed;
				text-align: center;
				line-height: 40px;
				color: white;
			}
			.base_navigation_bar,#BarAppearance {
				z-index: 1;
			}
			.top-right-p{
				float: right;
			}
			.top-left-p{
				float: left;
			}
			.search-div{
				margin-left: 10px;
				width: calc(100% - 74px);
			}
			.mui-input-clear[type=search]{
				margin-top: 6px;
				margin-bottom: 0;
				background-color: white;
				color: #222;
				border-radius: 15px;
				height: 30px;
				font-size: 14px;
				text-align: left;
			}
			.search-icon{
				width: 20px;
				position: absolute;
				left: 4px;
				top: 11px;
			}
			.base_right_item{
				width: 60px;
			}
			.search-history-title{
				color: #666;
				font-size: 14px;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
	    <div class="base_navigation_bar base_style_color base_navigation_item_bar">
		    <a class="base_right_item nav-item" href="#" onclick="cancelClick()">
	            取消
	        </a>
        	<div class="mui-input-row mui-search search-div">
        		<img class="search-icon" src="../../image/icon_search.png">
				<input id="course_search_input" type="search" class="mui-input-clear" placeholder="请输入课程名称搜索">
			</div>
	    </div>
	    <div class="base_content_div">
		    <div class="history-div">
		    	<ul class="mui-table-view">
		    		<li class="mui-table-view-cell">
		    			<p class="top-right-p base_black_grey base_content_font" onclick="clearHistoryClick()">
		    				清除
		    			</p>
		    			<p class="top-left-p base_black_grey base_content_font">
		    				历史搜索
		    			</p>
		    		</li>
		    	</ul>
				<ul id="history_list" class="mui-table-view">
					<!-- <span class="search-history-title">
						物流运输
					</span>
					<span class="search-history-title">
						物流运输物流运输物流运输
					</span> -->
				</ul>
				<div class="noSign" hidden="hidden" id="noData">
					<p class="font16 top_15 base_dark_grey" >
						暂无搜索记录
					</p>
				</div>
		    </div>
		    <div class="search-result-div" hidden="hidden">
		    	<ul id="tesacherTableView" class="mui-table-view">
		    		<!-- <li class="mui-table-view-cell">
			    		<p class="base_dark_grey base_content_font">
			    			物理运输
			    		</p>
			    	</li> -->
		    	</ul>
		    </div>
		</div>
	</body>
	<!-- <script type="text/javascript" src="../../script/mui.min.js"></script> -->
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var page = 1;
		var rows = 10;
		var dropRefreshCount = 0;
		var courseDatas = new Array();
		var oneWeek = 7 * 24 * 60 * 60 * 1000;
		var firstLoad = true;
		var keyword = '';
		var searchHistoryDatas = new Array();
		apiready = function(){
		    loadSearchHistry();
		    setupSearchNotifi();
		}
		function setupSearchNotifi(){
			$('#course_search_input').bind('input propertychange', function() { 
				keyword = $(this).val();
				if (keyword == '') {
					$('.history-div').show();
					$('.search-result-div').hide();
					loadSearchHistry();
				}else{
					loadNewData();
				}
			});
			$('#course_search_input').bind('keydown',function(event){  
				if(event.keyCode == "13"){  
				    var searchKeyword = $('#course_search_input').val();  
				    api.sendEvent({
				        name: 'searchCourseNotifi',
				        extra: {
				            keyword: searchKeyword
				        }
				    });
				    api.setFrameAttr({
					    name: 'CourseCenter_CourseSearch',
					    hidden: true
					});
				}  
			});
			api.addEventListener({
			    name: 'keyback'
			}, function(ret, err) {
			    api.setFrameAttr({
				    name: 'CourseCenter_CourseSearch',
				    hidden: true
				});
			});
		}
		function clearHistoryClick(){
			if (searchHistoryDatas.length == 0) {
				return;
			}
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid')
			};
			cfnetppPOST(url_removeSearchHistory, param, false, function(data, status){
				
				SendBusinessOperationsLogNotifi('选课中心课程列表页', '080', param, param, '', data, '删除搜索历史接口', '080-01')
				
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
						    msg: '清除成功'
						});
						$('#history_list').html('');
						$('#noData').show();
					}else{
						api.toast({
						    msg: '清除失败，请重试'
						});
					}
				}else{
					api.toast({
					    msg: '清除失败，请重试'
					});
				}
			});
		}
		function cancelClick(){
			var searchKeyword = $('#course_search_input').val();  
			if (searchKeyword == '') {//如果取消时没有搜索内容，则刷新列表页面
				api.sendEvent({
			        name: 'searchCourseNotifi',
			        extra: {
			            keyword: searchKeyword
			        }
			    });
			}
			api.setFrameAttr({
			    name: 'CourseCenter_CourseSearch',
			    hidden: true
			});
		}
		function loadSearchHistry(){
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid')
			};
			cfnetppPOST(url_searchHistory, param, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						var keywordlist = data.data.keywordlist;
						if (keywordlist != null && keywordlist.constructor == Array && keywordlist.length > 0) {
							searchHistoryDatas = keywordlist;
							var historyHtmlString = '';
							for (var i = keywordlist.length - 1; i >= 0; i--) {
								var title = keywordlist[i].keyword;
								historyHtmlString += historyHtml(title);
							}
							$('#history_list').html(historyHtmlString);
							historyCellClick();
							$('#noData').hide();
						}else{
							$('#history_list').html('');
							$('#noData').show();
						}
					}else{
						$('#history_list').html('');
						$('#noData').show();
					}
				}else{
					$('#history_list').html('');
					$('#noData').show();
				}
			});
		}
		function historyCellClick(){
			$('.search-history-title').unbind('click');
			$('.search-history-title').click(function(){
				keyword = $(this).text();
				if (keyword != '') {
					api.sendEvent({
				        name: 'searchCourseNotifi',
				        extra: {
				            keyword: keyword
				        }
				    });
				    api.setFrameAttr({
					    name: 'CourseCenter_CourseSearch',
					    hidden: true
					});
				}
			});
		}
		function historyHtml(title){
			return '<span class="search-history-title">'+
						title+
					'</span>';
		}
		function loadNewData() {
			page = 1;
			loadData();
		}
		function loadMoreData() {
			page++;
			loadData();
		}
		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				if (dropRefreshCount >= rows) {
					loadMoreData();
				}
			});
		}
		function loadData(){
			// if (firstLoad == true) {
			// 	api.showProgress({
			// 	    style: 'default',
			// 	    animationType: 'fade',
			// 	    title: '加载中...',
			// 	    text: '',
			// 	    modal: false
			// 	});
			// 	firstLoad = false;
			// }
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				keyword : keyword,
				record : 0,
				page : page,
				rows : rows
			};
			cfnetppPOST(url_searchCourseList, param, true, function(data, status) {
				api.refreshHeaderLoadDone();
				api.hideProgress();
				if (status == 'success') {
					if (data.status == true) {
						if (page == 1) {
							courseDatas = new Array();
						}
						var courseList = data.data;
						if (courseList != null && courseList.constructor == Array && courseList.length > 0) {
							var currentIndex = courseDatas.length;
							dropRefreshCount = courseList.length;//设置当前下拉数
							courseDatas = courseDatas.concat(courseList);
							var courseHtmlString = new String();
							for (var i = currentIndex; i < courseDatas.length; i++) {
								var courseData = courseDatas[i];
								courseHtmlString += courseHtmlWithData(courseData, i);
							}
							if (page == 1) {
								$('#tesacherTableView').html(courseHtmlString);
							}else{
								$('#tesacherTableView').append(courseHtmlString);
							}
							addCellClick();
							$('.history-div').hide();
							$('.search-result-div').show();
						}else{
							if (page == 1) {
								$('#tesacherTableView').html('');
								$('.history-div').show();
								$('.search-result-div').hide();
							}
						}
					}else{
						if (page == 1) {
							$('#tesacherTableView').html('');
							$('.history-div').show();
							$('.search-result-div').hide();
						}
					} 
				}else{
					if (page == 1) {
						$('#tesacherTableView').html('');
						$('.history-div').show();
						$('.search-result-div').hide();
					}
				}
			});
		}
		//添加点击事件
		function addCellClick(){
			$('.search-cell').unbind('click');
			$('.search-cell').click(function(){
				var index = $(this).attr('index');
				var data = courseDatas[parseInt(index)];
				data["courseid"] = data.cid;
				data["planid"] = "0";
				openMooc(data);
			});
		}
		//打开mooc课程
		function openMooc(data){
			data["userType"] = "student";
			if (data.isselected == 1) {
				api.openWin({useWKWebView:true,
				    name: 'Teacher_StudyCourseInfo',
				    url: '../Teacher_Teach/Teacher_StudyCourseInfo.html',
				    pageParam: data
				});
			}else{
				api.openWin({useWKWebView:true,
				    name: 'CourseCenter_CourseDetail',
				    url: 'CourseCenter_CourseDetail.html',
				    pageParam: data
				});
			}
		}
		//时间标签
		function timeTitleWithEndTime(endTime){
			var timeTitleHtml = '';
			var etime = parseInt(endTime) * 1000;//结束时间
			var nowTime = Date.parse(new Date());
			// alert("结束时间"+etime+'\n当前时间'+nowTime);
			if (etime <= nowTime) {
				timeTitleHtml = '<p class="course-status-tag">已结束</p>';
			}else{
				var tmpTime = etime - nowTime;
				if (tmpTime <= oneWeek) {
					var timeDate = new Date(etime);
					var timeMonth = timeDate.getMonth() + 1;
					var timeDay = timeDate.getDate();
					var timeTitle = timeMonth + '-' + timeDay + '到期';
					timeTitleHtml = '<p class="course-status-tag">' + timeTitle + '</p>';
				}
			}
			return timeTitleHtml;
		}
		function courseHtmlWithData(data, index){
			return '<li index="' + index + '" class="mui-table-view-cell search-cell">'+
			    		'<p class="base_dark_grey base_content_font">'+
			    			data.coursename+
			    		'</p>'+
			    	'</li>';
		}
		function minuteWithSecond(second){
			// return (parseInt(second) / 60).toFixed(0);//该方法会四舍五入
			return parseInt(parseInt(second) / 60);
		}
		function imageUrlWithStr(string){
			if (string.indexOf("http://") == -1) {
				if (string.indexOf("learn/") == -1) {
					return 'http://bos.cfnet.org.cn/' + string;
				}else{
					return 'http://cfnet.org.cn/data/uploads/' + string;
				}
			}else{
				return string;
			}
		}
		function refreshData(){
			firstLoad = true;
			loadNewData();
		}
		function numNullStr(str){
			if (str == null || str == '' || str == undefined) {
				return 0;
			}
			return str;
		}
	</script>
</html>